<template>
    <el-table :data="list" style="width: 100%">
  
      <el-table-column label="选择" width="80">
        <template #default="scope">
        <el-checkbox v-model="scope.row.state" size="large" @change="checkHandle(scope.$index)" :disabled="show==!scope.row.state"></el-checkbox>
      </template>

      </el-table-column>
      <el-table-column label="编号" width="150">
        <template #default="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="待办事项" width="200">
        <template #default="scope">{{ scope.row.content }}</template>
      </el-table-column>
      <el-table-column label="创建时间" width="100">
        <template #default="scope">{{ scope.row.startDate }}</template>
      </el-table-column>
      <el-table-column label="完成时间" width="120">
        <template #default="scope">{{ scope.row.finishDate }}</template>
      </el-table-column>
      
     
      <el-table-column align="right">
     
      <template #default="scope">
      
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
    </el-table>
  </template>
  <script>
  import{ElMessageBox} from 'element-plus'
  export default{
    data(){
      return{
        show:false,
        list1:this.list
      }

    },
    props:{list:Array},
    
    methods:{
      checkHandle(i){
              ElMessageBox.confirm(
    '你确定任务已经完成了吗?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '点错了',
      type: 'warning',
    }
  )
    .then(() => {
     this.$emit('finish',i)
    })
    .catch(() => {
      
        this.list1[i].state=false
      })
   
    },
    handleDelete(i){
          ElMessageBox.confirm(
                '确定要删除吗?',
                'Warning',
            {
              confirmButtonText: '确定',
              cancelButtonText: '不确定',
              type: 'warning',
            }
          )
            .then(() => {
            this.$emit('del',i)
            })
            .catch(() => {
              
               
              })

    }
  }
}
  
 
  </script>